<template>
  <div>
    <div class="water_four"></div>
  </div>
</template>

<script>
import "echarts-liquidfill";
import * as echarts from "echarts";
export default {
  mounted() {
    this.$nextTick(() => {
      this.waterBollFour();
    });
  },
  methods: {
    waterBollFour() {
      var chartDom = document.querySelector(".water_four");
      var myChart = echarts.init(chartDom);
      var option = {
        series: [
          {
            type: "liquidFill",
            data: [0.6, 0.5, 0.4, 0.3],
            amplitude: 0,
            waveAnimation: 0,
            radius: "85%",
            outline: {
              show: false,
            },
            backgroundStyle: {
              borderColor: "#156ACF",
              borderWidth: 1,
              color: "cyan",
              // shadowColor: "rgba(0, 0, 0, 0)",
              // shadowBlur: 20,
            },
            color: ["rgb(21,97,191)"],

            itemStyle: {},
            outline: {
              show: true,
              borderDistance: 5,
            },
          },
        ],
      };
      myChart.setOption(option);
    },

  },
};
</script>

<style scoped>

.water_four {
 width: 100%;
 height: 300px;
}
</style>